<template>
  <div>
    <div class="nav">
      <div class="nav_title">
        <div class="nav_left">
          <span>茶叶</span>
        </div>
        <div class="nav_nav">
          <span>全部</span>
          <span>绿茶</span>
          <span>黄茶</span>
          <span>乌龙茶</span>
          <span>红茶</span>
          <span>黑茶</span>
          <span>白茶</span>
          <span>红茶</span>
        </div>
      </div>
    </div>
    <div class="content">
        <el-row :gutter="20">
        <el-col :span="5" v-for="(i,$index) in arr" :key="$index">
             <router-link :to="'/xiangqing/茶叶'+i.title">
          <div class="grid-content bg-purple">
            <div class="imgbox">
              <img :src="i.imgurl" alt="" />
            </div>
            <div class="content_title">
               {{i.title}}
            </div>
            <div class="content_jiage">
             {{i.jiage}}
            </div>
            <div class="content_a">
                <span><a href=""></a></span>
            </div>
          </div>
           </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvMDMzMjg2Zjc0ZWU4M2ZiM2U5MTllZTgwMDc4MjRjNTAtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvMGFkMzdiZDQwOGNjYWMwYzI0Y2JmNzdiMDZiNDg4ODAtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjhlYTFmMDQ0Y2NhOWI4NWEzYWZkMzExYzczZTY3MjQtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvMjY1ZjU4NWU5ZmNmYjkxMDBlMzc1YmFkMDQyNTkwMzEtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvNDM1OTBkNjFjM2ViOGU2YzUyYWU3ZmM2N2I3YjQwZGMtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvNWM4NmNiNjkzOTdjOTM4NWQ4MzI0MDdlZDhhY2EwMmUtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvNWNjYjNmZjU3YWU2YjBmMmRiYWZmOTk2MzljY2E4N2MtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvYzNjYmVkZWE4N2JmNzZjOTUyODdjZWUyYWQ4MjgyM2MtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvOTc4NTUwMDZjYzA1MDQ1OGVkMDFmZjE2N2I4YjNkOTctNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
        {
          imgurl:
            "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvMDMzMjg2Zjc0ZWU4M2ZiM2U5MTllZTgwMDc4MjRjNTAtNDAweDQwMC05MC53ZWJw.webp",
          title: "茉莉花茶",
          jiage: "￥223.0",
        },
      ],
    };
  },
};
</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .content_a>span{
        display: inline-block;
        width: 25px;
        height: 25px;
        border: 1px solid #ccc;
    }
    .content_jiage{
        color: #8e8e8e;
        font-size: 16px;
        font-family: sans-serif;
        padding: 10px 0 15px;
    }
    .content_title{
    padding-bottom: 15px;
    color: #555555;
    font-size: 16px;
    line-height: 22px;

}
.el-col{
    max-width: 20%;
    padding-bottom: 10px;
    padding-top: 10px;


}
.imgbox{
     padding-bottom: 10px;

}
.imgbox > img {
  width: 100%;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  /* min-width: 15%; */
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.nav {
  width: 100%;
  height: 87px;
  margin-top: 80px;
}
.nav_title {
  width: 100%;
  padding: 20px 40px;
  height: 47px;
  display: flex;
}
.nav_left {
  flex: 2;
  text-align: left;
}
.nav_left > span {
  font-family: 微软雅黑;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  color: #333333;
  padding: 0 0 15px 0;
  display: block;
  padding: 0 0 15px 0;
  /* display: block; */
}
.nav_nav {
  flex: 8;
  line-height: 47px;
}
.nav_nav > span {
  color: #878787;
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 15px;
  line-height: 23px;
  font-family: å¾®è½¯é›…é»‘, Helvetica, Arial, Verdana, sans-serif;
  margin-right: 25px;
  /* display: inline-block; */
  padding: 10px 5px;
}
.nav_nav>span:nth-child(1){
    /* border-bottom: 1px solid #85bf41; */

}
.nav_nav>span:hover{
    border-bottom: 1px solid #85bf41;

}
.content {
  padding: 0 40px;
}
</style>